<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>照片墙</title>
    <link rel='stylesheet' href='/stylesheets/photo.css' />
    <link rel='stylesheet' href='/stylesheets/page.css' />
    <link rel='stylesheet' href='/stylesheets/header.css' />
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body ng-app="myApp">
<% include header.html %>
<div class="photoDisplay">
    <div class="ribbon"><span class="ribbon-content">照片墙</span></div>
    <% photos.forEach(function (photo) {%>
    <div class="photoList">
        <h2><%=photo.name%></h2>
        <a class="delete"  href="/photos/delete?id=<%=photo._id %>&path=<%=photo.path %>&page=<%= page %>" ><i class="fa fa-trash-o"></i></a>
        <a href="#"> <img src="<%=photo.path%>">
           </a>
    </div>
    <%})%>
    <div id="pagination">
    </div>
</div>
<script type="text/javascript" src="/javascripts/angular.min.js"></script>
<script type="text/javascript" src="/javascripts/myApp.js"></script>
<script type="text/javascript" src="/javascripts/header1.js"></script>
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/jqPaginator.js"></script>
<script>
    $(function () {
//        $("img").hover(function(){
//            $(this).css("opacity","0.3");
//            $(this).siblings('i').show();
//        },function(){
//            $(this).css("opacity","1");
//            $(this).siblings('i').hide();
//        });
        var totalPages1 = '<%= totalPages %>';
        var totalPages = parseInt(totalPages1);
        var currentPage1 = '<%= page %>';
        var currentPage = parseInt(currentPage1);

        function cur(first) {
            if (currentPage == 1) {
                if (first == "first") {
                    return '<li class="first"><a href="javascript:void(0);">首页</a></li>';
                } else {
                    return '<li class="prev"><a href="javascript:void(0);">«</a></li>';
                }

            } else {
                if (first == "first") {
                    return '<li class="first"><a href="/operator/photoEdit?page=1">首页</a></li>';
                } else {
                    return '<li class="prev"><a href="/operator/photoEdit?page=' + (currentPage - 1) + '">«</a></li>';
                }
            }
        }

        function last(last) {
            if (currentPage == totalPages) {
                if (last == "last") {
                    return '<li class="last"><a href="javascript:void(0);">尾页</a></li>';
                } else {
                    return '<li class="next"><a href="javascript:void(0);">»</a></li>';
                }
            } else {
                if (last == "last") {
                    return '<li class="last"><a href="/operator/photoEdit?page=' + totalPages + '">尾页</a></li>'
                } else {
                    return '<li class="next"><a href="/operator/photoEdit?page=' + (currentPage + 1) + '">»</a></li>';
                }
            }
        }

        $.jqPaginator('#pagination', {
            totalPages: totalPages,
            visiblePages: 5,
            currentPage: currentPage,
            wrapper: '<ul class="pagination"></ul>',
            first: cur('first'),
            prev: cur('prev'),
            next: last('next'),
            last: last('last'),
            page: '<li class="page"><a href="/operator/photoEdit?page={{page}}">{{page}}</a></li>',
            onPageChange: function (num) {
            }
        });
    });
</script>
</body>
</html>